<script lang="ts" setup>
import type { VbenFormProps } from '#/adapter/form';
import type { VxeGridProps } from '#/adapter/vxe-table';
import { Page } from '@vben/common-ui';
import { Popover,Avatar,Image,Tag } from 'ant-design-vue';
import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { getLogApi,getRechargeTypeApi,getPaymentMethodApi,getPayStatusApi } from '#/api/user/recharge';

const formOptions: VbenFormProps = {
  // 默认展开
  collapsed: false,
  schema: [
    {
      component: 'Input',
      componentProps: {
        allowClear: true,
        placeholder: '请输入昵称/手机号/订单号',
      },
      fieldName: 'search',
      label: '关键词',
      defaultValue: '',
    },
    {
      component: 'ApiSelect',
      componentProps: {
        // 菜单接口转options格式
        afterFetch: (data: { name: string; value: number }[]) => {
          return [{ name: '全部', value: 0 },...data].map((item: any) => ({
            label: item.name,
            value: item.value,
          }));
        },
        // 菜单接口
        api: getRechargeTypeApi,
      },
      fieldName: 'recharge_type',
      label: '充值方式',
      defaultValue: 0,
    },
    {
      component: 'ApiSelect',
      componentProps: {
        // 菜单接口转options格式
        afterFetch: (data: { name: string; value: number }[]) => {
          return [{ name: '全部', value: '' },...data].map((item: any) => ({
            label: item.name,
            value: item.value,
          }));
        },
        // 菜单接口
        api: getPaymentMethodApi,
      },
      fieldName: 'pay_method',
      label: '支付方式',
      defaultValue: '',
    },
    {
      component: 'ApiSelect',
      componentProps: {
        // 菜单接口转options格式
        afterFetch: (data: { name: string; value: number }[]) => {
          return [{ name: '全部', value: 0 },...data].map((item: any) => ({
            label: item.name,
            value: item.value,
          }));
        },
        // 菜单接口
        api: getPayStatusApi,
      },
      fieldName: 'pay_status',
      label: '支付状态',
      defaultValue: 20,
    },
    {
      component: 'RangePicker',
      fieldName: 'betweenTime',
      label: '支付时间',
      defaultValue: '',
      componentProps: {
        format: 'YYYY-MM-DD',
        valueFormat: 'YYYY-MM-DD HH:mm:ss',
      },
    },
  ],
  // 控制表单是否显示折叠按钮
  showCollapseButton: false,
  // 是否在字段值改变时提交表单
  submitOnChange: true,
  // 按下回车时是否提交表单
  submitOnEnter: true,
};

interface RowType {
  order_id: number;
  user_id: number;
  user: { nick_name: string; user_id: number; mobile: string; avatar: Array<{ id: number, url: string }> };
  order_no: string;
  recharge_type: number;
  recharge_type_name: string;
  plan_id: number;
  order_plan: Array<{ order_plan_id:number,order_id:number,plan_id:number,plan_name:string,money:number,gift_money:number,create_time:string,update_time:string }>;
  pay_price: number;
  gift_money: number;
  actual_money: number;
  pay_method: string;
  pay_method_name: string;
  pay_status: number;
  pay_status_name: string;
  trade_id: string;
  platform: string;
  pay_time: string;
  create_time: string;
  update_time: string;
}

const gridOptions: VxeGridProps<RowType> = {
  columns: [
    { field: 'order_no', slots: { default: 'order_no' }, title: '订单号', minWidth:'auto' },
    { field: 'user', slots: { default: 'user' }, title: '用户信息', minWidth:'auto' },
    { field: 'recharge_type_name', title: '充值方式', minWidth:'auto' },
    { field: 'order_plan.plan_name', title: '套餐名称', minWidth:'auto' },
    { field: 'pay_price', title: '支付金额', minWidth:'auto' },
    { field: 'gift_money', title: '赠送金额', minWidth:'auto' },
    { field: 'pay_method', slots: { default: 'pay_method' }, title: '支付方式', minWidth:'auto' },
    { field: 'pay_status_name', title: '支付状态', minWidth:'auto' },
    { field: 'pay_time', title: '支付时间', minWidth:'auto' },
    { field: 'create_time', title: '创建时间', minWidth:'auto' },
  ],
  showOverflow: false,
  exportConfig: {},
  keepSource: true,
  // border: true,
  proxyConfig: {
    ajax: {
      query: async ({ page }, formValues) => {
        return await getLogApi({
            page: page.currentPage,
            pageSize: page.pageSize,
            ...formValues
        });
      },
    },
    sort: true,
  },
  toolbarConfig: {
    custom: true,
    // export: true,
    // import: true,
    refresh: { code: 'query' },
    zoom: true,
  },
  rowConfig: {
    keyField: 'log_id',//主键的字段名
  },
  cellConfig: {
    height: 50,
  },
};

const [Grid] = useVbenVxeGrid({ formOptions,gridOptions });

</script>

<template>
  <Page>
    <Grid table-title="变更记录">
      <template #order_no="{ row }">
        <Popover>
          <template #content>
            <span>tradeID：{{ row.trade_id }}</span>
          </template>
          <span>{{ row.order_no }}</span>
        </Popover>
      </template>
      <template #user="{ row }">
        <div class="flex justify-center items-center">
          <div class="flex items-center">
            <Popover>
              <template #content>
                <Image :width="90" :src="item.url" v-for="(item,index) in row.user.avatar" :key="index" />
              </template>
              <Avatar :size="46" :src="item.url" v-for="(item,index) in row.user.avatar" :key="index"></Avatar>
            </Popover>
            <div class="ml-1 text-left text-sm text-black/75">
              <p>{{ row.user.nick_name }}</p>
              <p>{{ row.user.mobile }}</p>
            </div>
          </div>
        </div>
      </template>
      <template #pay_method="{ row }">
        <Tag color="green" v-if="row.pay_method=='wechat'">{{ row.pay_method_name }}</Tag>
        <Tag color="blue" v-else-if="row.pay_method=='alipay'">{{ row.pay_method_name }}</Tag>
        <Tag color="default" v-else>{{ row.pay_method_name }}</Tag>
      </template>
    </Grid>
  </Page>
</template>
